<template>
	<view class="list">
		<van-nav-bar class="nav" :border='false' left-arrow @click-left="onClickLeft">
			<template #title>
				<p class="title">订单列表</p>
			</template>
		</van-nav-bar>
		<van-tabs class="tabs" v-model:active="active">
			<van-tab title="全部">
				<van-pull-refresh v-model="loading" @refresh="onRefresh">
					<template #loading>
					    <van-loading v-if="load" type="spinner" size="15"
					    	style="display: flex;justify-content: center;" />
					  </template>
					<!-- <p>刷新次数: {{ count }}</p> -->
					<view class="listUl">
						<ListLi v-for="item in data" :key="item.id" :id='item.id' :state='item.state'
							:title='item.title' :image='item.image' :tag='item.tag' :price='item.price' :num='item.num'>
						</ListLi>
						<van-loading v-if="load" type="spinner" size="30"
							style="display: flex;justify-content: center;" />
						<view class="empty" v-if="empty">
							列表到底部咯~
						</view>
						<view class="empty" v-if="network">
							请检查你的网络是否正常~
						</view>
					</view>
				</van-pull-refresh>
			</van-tab>
			<van-tab title="待付款">
				<van-pull-refresh v-model="loading" @refresh="onRefresh">
					<template #loading>
					    <van-loading v-if="load" type="spinner" size="15"
					    	style="display: flex;justify-content: center;" />
					  </template>
					<!-- <p>刷新次数: {{ count }}</p> -->
					<view class="listUl">
						<ListLi v-for="item in data" :key="item.id" :id='item.id' :state='item.state'
							:title='item.title' :image='item.image' :tag='item.tag' :price='item.price' :num='item.num'>
						</ListLi>
						<van-loading v-if="load" type="spinner" size="30"
							style="display: flex;justify-content: center;" />
						<view class="empty" v-if="empty">
							列表到底部咯~
						</view>
						<view class="empty" v-if="network">
							请检查你的网络是否正常~
						</view>
					</view>
				</van-pull-refresh>
			</van-tab>
			<van-tab title="代发货">
				<van-pull-refresh v-model="loading" @refresh="onRefresh">
					<template #loading>
					    <van-loading v-if="load" type="spinner" size="15"
					    	style="display: flex;justify-content: center;" />
					  </template>
					<!-- <p>刷新次数: {{ count }}</p> -->
					<view class="listUl">
						<ListLi v-for="item in data" :key="item.id" :id='item.id' :state='item.state'
							:title='item.title' :image='item.image' :tag='item.tag' :price='item.price' :num='item.num'>
						</ListLi>
						<van-loading v-if="load" type="spinner" size="30"
							style="display: flex;justify-content: center;" />
						<view class="empty" v-if="empty">
							列表到底部咯~
						</view>
						<view class="empty" v-if="network">
							请检查你的网络是否正常~
						</view>
					</view>
				</van-pull-refresh>
			</van-tab>
			<van-tab title="已发货">
				<van-pull-refresh v-model="loading" @refresh="onRefresh">
					<template #loading>
					    <van-loading v-if="load" type="spinner" size="15"
					    	style="display: flex;justify-content: center;" />
					  </template>
					<!-- <p>刷新次数: {{ count }}</p> -->
					<view class="listUl">
						<ListLi v-for="item in data" :key="item.id" :id='item.id' :state='item.state'
							:title='item.title' :image='item.image' :tag='item.tag' :price='item.price' :num='item.num'>
						</ListLi>
						<van-loading v-if="load" type="spinner" size="30"
							style="display: flex;justify-content: center;" />
						<view class="empty" v-if="empty">
							列表到底部咯~
						</view>
						<view class="empty" v-if="network">
							请检查你的网络是否正常~
						</view>
					</view>
				</van-pull-refresh>
			</van-tab>
			<van-tab title="交易完成">
				<van-pull-refresh v-model="loading" @refresh="onRefresh">
					<template #loading>
					    <van-loading v-if="load" type="spinner" size="15"
					    	style="display: flex;justify-content: center;" />
					  </template>
					<!-- <p>刷新次数: {{ count }}</p> -->
					<view class="listUl">
						<ListLi v-for="item in data" :key="item.id" :id='item.id' :state='item.state'
							:title='item.title' :image='item.image' :tag='item.tag' :price='item.price' :num='item.num'>
						</ListLi>
						<van-loading v-if="load" type="spinner" size="30"
							style="display: flex;justify-content: center;" />
						<view class="empty" v-if="empty">
							列表到底部咯~
						</view>
						<view class="empty" v-if="network">
							请检查你的网络是否正常~
						</view>
					</view>
				</van-pull-refresh>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script lang="ts" setup>
	import ListLi from '@/components/orderList/index.vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import type { OrderSuccess } from '@/types/orderList'
	import { getOrderAPI } from '@/api/orderList'
	import { ref } from 'vue'

const onClickLeft = () => history.back();
	// 选项卡的默认显示页面
	const active = ref(0);
	// 列表数据变量
	const data = ref<OrderSuccess[]>()
	// 定义每次请求的数据
	const pageNumber = ref<number>(1)
	const pageSize = ref<number>(5)
	onLoad(async () => {
		try{
			// 初次发起订单列表请求
			// const list = await getOrderAPI({ pageNumber: pageNumber.value, pageSize: pageSize.value })
			// 赋值给data变量
			// data.value = list.data
			
			
			// 假数据
			data.value = [{
            'id': 1,
            'title': '锦鲤AI算力机-K1',
            'image': '1.png',
            'state': '等待买家付款',
            'tag': '托管',
            'price': '1100',
            'num': 1
        },{
            'id': 2,
            'title': '锦鲤AI算力机-K2',
            'image': '1.png',
            'state': '交易关闭',
            'tag': '设备召唤卷',
            'price': '1100',
            'num': 2
        },{
            'id': 3,
            'title': '锦鲤AI算力机-K1',
            'image': '1.png',
            'state': '等待平台发货',
            'tag': '托管',
            'price': '1100',
            'num': 3
        },{
            'id': 4,
            'title': '锦鲤AI算力机-K2',
            'image': '1.png',
            'state': '平台已发货',
            'tag': '托管',
            'price': '1100',
            'num': '1'
        },{
            'id': 5,
            'title': '锦鲤AI算力机-K1',
            'image': '1.png',
            'state': '交易完成',
            'tag': '托管',
            'price': '1100',
            'num': '1'
        }]
		}catch(e){
			setTimeout(()=>{
				load.value= false
				empty.value = true
				loading.value= false
			},1000)
		}
		
	})



	// 上拉加载load加载动效
	const load = ref(true)
	// 判断有无数据时
	const empty = ref(false)
	// 上拉加载的获取更多的数据
	onReachBottom(async () => {
		// 到底加载动画
		load.value = true
		//加载下一页
		pageNumber.value++
		//发送请求下一页的数据
		const add = await getOrderAPI({ pageNumber: pageNumber.value, pageSize: pageSize.value })
		// 判断是否还有更多数据
		if (add.data.length > 0) {
			// 合并当前数据与最新数据
			data.value = data.value?.concat(add.data)
			// 给动画一个关闭的
			load.value = false
			// 给下面的提示无数据的变量设置为false
			empty.value = false
		} else {
			// 给动画一个关闭的
			load.value = false
			// 给下面的提示无数据的变量设置为true
			empty.value = true
		}
	})

	const network = ref(false)
	// 下拉加载的动画
	const loading = ref(false);
	const onRefresh =async () => {
			try {
			    // 回到初始数据
			    	pageNumber.value = 1
			    	// 请求回初始数据
			    	const list = await getOrderAPI({ pageNumber: pageNumber.value, pageSize: pageSize.value })
			    	// 赋值给data变量
			    	if(list.code===200){
			    		loading.value = false;
			    		data.value = list.data
			    		// 给动画一个关闭的
			    		load.value = false
			    		// 给下面的提示无数据的变量设置为true
			    		// network.value = true
			    	}else{
			    		loading.value = true
			    		data.value = []
			    		// 给动画一个关闭的
			    		load.value = false
			    		// 给下面的提示无数据的变量设置为true
			    		network.value = true
			    	}
			  } catch (ex) {
				  load.value= false
				  empty.value = false
			    // 处理网络中断或请求失败的情况
			    if (ex instanceof TypeError && ex.message.includes('Network request failed')) {
			      console.error('请求失败：网络中断');
			    } else {
			      console.error('发生异常：', ex);
			    }
			  }
	};
</script>

<style lang="scss" scoped>
	@import '../../common.scss';

	.list {
		height: 100vh;
		background-color: $background;
	}

	::v-deep.van-nav-bar__content {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: $background;
		display: flex;
		align-items: center;
		height: var(--van-nav-bar-height);
	}
	::v-deep.van-ellipsis {
		overflow: visible !important;
	}
	.nav {
		--van-nav-bar-height: 88px;
		background-color: $background;
		--van-nav-bar-icon-color: #ffffff;
		--van-nav-bar-text-color: #ffffff;
		--van-nav-bar-title-text-color: #ffffff;
		--van-nav-bar-arrow-size: 36px;
		--van-nav-bar-title-font-size: 36px;
	
		.van-nav-bar__title {
			height: 88px;
		}
	
		.title {
			font-size: 36px;
			font-weight: 500;
		}
	}

	.tabs {
		--van-tab-active-text-color: #ffffff;
		--van-tab-text-color: #b3b3b3;
		--van-tabs-nav-background: block;
		--van-tabs-bottom-bar-color: #4E47FF;
		--van-tabs-bottom-bar-height: 6px;
		// --van-tabs-bottom-bar-width: 
		// --van-tab-font-size:45px
		--van-tab-line-height: 88px;
		--van-tab-font-size: 32px;
		--van-tabs-default-color: red
	}

	.listUl {
		
		padding-top: 176px;
		padding-bottom: 15px;
		min-height: 1000px;
		background-color: $background;
	}



	::v-deep.van-tabs__wrap {
		height: 88px;
	}

	::v-deep.van-card__thumb {
		height: 160px;
		width: 160px;
	}

	::v-deep.van-card__bottom {
		padding-bottom: 27px;
	}

	::v-deep.van-card__content {
		margin-left: 24px;
	}

	

	::v-deep.van-tabs__wrap {
		position: fixed;
		width: 100%;
		TOP: 88px;
		LEFT: 0;
		Z-INDEX: 1;
		BACKGROUND: $background;
	}

	.empty {
		display: flex;
		justify-content: center;
		height: 60px;
		align-items: center;
		font-size: 30px;
		color: #b3b3b3;
	}
</style>